<template>
  <div>
    <!-- 浅绿色的16进制是#07c160 -->
    <van-tabbar v-model="active" active-color="#07c160" @change="onChange">
      <van-tabbar-item icon="wap-home-o" name="/home">首页</van-tabbar-item>
      <van-tabbar-item icon="qr" name="/cate">分类</van-tabbar-item>
      <van-tabbar-item icon="shopping-cart-o" name="/cart" :badge="totalCount"
        >购物车</van-tabbar-item
      >
      <van-tabbar-item icon="contact-o" name="/mine">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()

import { useCartStore } from '@/stores/cart'
import { storeToRefs } from 'pinia'
const { totalCount } = storeToRefs(useCartStore())

// 当前激活的tabbar
const active = ref(sessionStorage.getItem('active') ? sessionStorage.getItem('active') : '/home')
// 点击切换tabbar,并且跳转路由
// 注意：这里使用sessionStorage存储，因为切换页面后，会丢失路由信息
const onChange = (name: string) => {
  sessionStorage.setItem('active', name)
  router.push(name)
}
</script>

<style scoped></style>
